<template>
    <div class="my-sidebar">
        <el-row class="tac">
            <el-col :span="24">
                <el-menu
                default-active="/"
                :default-openeds="['1', '/']"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                @select="handleSelect"
                background-color="#000000"
                text-color="#fff"
                active-text-color="#ffd04b">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>基础部分</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/"> 首页 </el-menu-item>
                            <el-menu-item index="/table"> Element表格 </el-menu-item>
                            <el-menu-item index="/custom-form"> Element表单 </el-menu-item>
                            <el-menu-item index="/parent"> 组件通信 </el-menu-item>
                            <el-menu-item index="/parent2"> 组件通信2 </el-menu-item>
                            <el-menu-item index="/slot"> slot插槽 </el-menu-item>
                            <el-menu-item index="/vue-api"> vue基础API </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>第三方</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/drawer"> drawer </el-menu-item>
                            <el-menu-item index="/echarts"> echarts </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>Vue Router</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/routes"> 动态路由 </el-menu-item>
                            <!-- <el-menu-item index="/echarts"> ec </el-menu-item> -->
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>Vuex最佳实践</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/shopping-card"> shopping card </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-col>
        </el-row>    
    </div>
</template>

<script>
export default {
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        handleSelect(index, indexPath) {
            console.log(indexPath)
            this.$router.push(index)
        }
    }
}
</script>

<style scoped>
    .my-sidebar a {
        color: #ffffff;
        text-decoration: none;
    }
</style>
